
import styled from 'styled-components';
import { CSSProperties, useEffect, useState } from 'react';
import { Button } from 'antd';
import {
    FooterToolbar,
    PageContainer,
    ProForm,
    ProFormDateRangePicker,
    ProFormDigit,
    ProFormRadio,
    ProFormItem,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
    ProLayout,
} from '@ant-design/pro-components';

import { Application, ApplicationCategory, appstoreSaveApplication, qiniuGetUploadToken } from '../../../services';
import { QiniuFileUpload } from '../../../components';
import { getNowFormatDate } from '../../../utils';

export interface ApplicationUploadVersionProps {
    style?: CSSProperties;
    item: Application;
}

export const ApplicationUploadVersion: React.FC<ApplicationUploadVersionProps> = (props) => {

    const [pkg, setPkg] = useState<Array<string>>([]);

    return (
        <Container style={props.style}>
            <ProForm<{ version: string, description?: string }>
                request={async () => {
                    return {
                        version: props.item?.version,
                        description: '版本描述'
                    };
                }}
                onFinish={async (values) => {
                    //TODO 校验
                    if (!pkg) {
                        return;
                    }
                    console.log(values);
                    let application = {
                        ...props.item,
                        version: values.version,
                        download: pkg && pkg.length > 0 ? pkg[0] : '',
                    };
                    //
                    let res = await appstoreSaveApplication(application);
                }}
                submitter={false}
            >
                <ProForm.Group>
                    <ProFormText width="sm" fieldProps={{}}
                        tooltip="例如:V1.2.3"
                        rules={[{ required: true }]} name="version" label="版本" />
                </ProForm.Group>

                <ProFormTextArea
                    rules={[{ required: true }]} width="xl" fieldProps={{ rows: 4 }} label="版本描述" name="description" />

                <ProFormItem
                    extra="只能上传zip文件,且不大于1MB"
                    rules={[{ required: true }]}
                    label="应用安装包"
                    name="download">
                    <QiniuFileUpload
                        title={'上传安装包'}
                        accept={"application/zip, application/x-zip, application/x-zip-compressed"}
                        max={1}
                        filePath={`g01/applications/packages/${getNowFormatDate('')}`}
                        onChange={async (files) => {
                            setPkg(files);
                        }}></QiniuFileUpload>
                </ProFormItem>
                <ProFormItem>
                    <Button type="primary" htmlType="submit">
                        上传版本
                    </Button>
                </ProFormItem>
            </ProForm>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
`;